import { Spin, Button } from "antd";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import classnames from "classnames";
import {
  WeaAlertPage,
  WeaFormItem,
  WeaBrowser,
  WeaLocaleProvider,
} from "ecCom";

const getLabel = WeaLocaleProvider.getLabel;
const createUserArray = (userList, label, show, func, id, arrShow) => {
  if (!userList) return undefined;
  let showList = userList.length <= 5 || show ? userList : userList.slice(0, 5);
  let showCls = !show || (show && arrShow);
  const formCls = classnames({
    [`cowork-detail-${id}`]: id,
    short: userList.length >= 5 && showCls,
  });
  return (
    <WeaFormItem
      ecId={`${
        (this && this.props && this.props.ecId) || ""
      }_WeaFormItem@gfsunj`}
      label={label}
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 18 }}
      underline
      className={formCls}
    >
      <WeaBrowser
        ecId={`${
          (this && this.props && this.props.ecId) || ""
        }_WeaBrowser@b6m15d`}
        type="17"
        isSingle={false}
        replaceDatas={showList}
        viewAttr="1"
      />
      {userList.length > 5 && func && (
        <span
          className="collapse-btn"
          title={show ? getLabel(26985, "收起") : getLabel(20234, "显示全部")}
          onClick={func}
        >
          <em className={show ? "icon-coms-up2" : "icon-coms-down2"} />
        </span>
      )}
    </WeaFormItem>
  );
};

@inject("coworkMainStore")
@observer
class Stat extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      noReadidsShow: false,
      noReadidsArrShow: false,
      parterShow: false,
      parterArrShow: false,
      typemanageridsShow: false,
      typemanageridsArrShow: false,
      creatersShow: false,
      creatersArrShow: false,
      principalsShow: false,
      principalsArrShow: false,
      quitersShow: false,
      quitersArrShow: false,
    };
  }

  componentDidMount() {
    const { coworkMainStore } = this.props;
    coworkMainStore.getShareConditionStrList();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.coworkId != this.props.coworkId) {
      const { coworkMainStore } = this.props;
      let stat = toJS(coworkMainStore.stat);
      if (!stat.readed) {
        coworkMainStore.getShareConditionStrList();
      }
    }
  }

  onRenderUserArray = (userList, label, show, func, id, arrShow, count) => {
    if (!userList) return undefined;
    let showList =
      userList.length <= 5 || show ? userList : userList.slice(0, 5);
    let showCls = !show || (show && arrShow);
    const formCls = classnames({
      [`cowork-detail-${id}`]: id,
      short: userList.length >= 5 && showCls,
    });
    return (
      <WeaFormItem
        ecId={`${
          (this && this.props && this.props.ecId) || ""
        }_WeaFormItem@gfsunj@${id}`}
        label={label}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        underline
        className={formCls}
      >
        <WeaBrowser
          ecId={`${
            (this && this.props && this.props.ecId) || ""
          }_WeaBrowser@b6m15d`}
          type="17"
          isSingle={false}
          replaceDatas={showList}
          viewAttr="1"
        />
        {userList.length >= 5 && count > 5 && func && (
          <Button
            ecId={`${
              (this && this.props && this.props.ecId) || ""
            }_Button@mb7k56`}
            onClick={func}
          >
            {getLabel("388933", "查看全部")}
          </Button>
        )}
      </WeaFormItem>
    );
  };

  render() {
    // 4 传参
    const { coworkMainStore, onCoverageViewMore } = this.props;
    let { stat } = coworkMainStore;
    stat = toJS(stat);

    // 定义
    const {
      noReadidsShow,
      noReadidsArrShow,
      parterShow,
      parterArrShow,
      typemanageridsShow,
      typemanageridsArrShow,
      creatersShow,
      creatersArrShow,
      principalsShow,
      principalsArrShow,
      quitersShow,
      quitersArrShow,
    } = this.state;

    if (!stat.readed) {
      return (
        <div style={{ height: 300 }}>
          <div className="top40 align-center" style={{ position: "relative" }}>
            <Spin
              ecId={`${
                (this && this.props && this.props.ecId) || ""
              }_Spin@vlcaqa`}
            />
          </div>
        </div>
      );
    }
    return (stat.alist && stat.alist.length !== 0) ||
      (stat.principals && stat.principals.length !== 0) ||
      (stat.creaters && stat.creaters.length !== 0) ||
      (stat.parter && stat.parter.length !== 0) ||
      (stat.typemanagerids && stat.typemanagerids.length !== 0) ||
      (stat.quiters && stat.quiters.length !== 0) ||
      (stat.noReadids && stat.noReadids.length !== 0) ? (
      <div className="cowork-content-stat cowork-content-style-public">
        <div className="cowork-content-condition">
          {stat.alist && stat.alist.length !== 0 && (
            <div>
              <p className="cowork-content-pub">
                <em
                  className="icon-cooperation-condition"
                  style={{ color: "#32ADFF" }}
                />
                <span>{getLabel(83210, "参与条件")}</span>
              </p>
              <div>
                {stat.alist.map((item) => {
                  let type = "17";
                  if (item.type == 1) {
                    type = 17;
                  } else if (item.type == 2) {
                    type = 194;
                  } else if (item.type == 3) {
                    type = 57;
                  } else if (item.type == 4) {
                    type = 65;
                  } else if (item.type == 6) {
                    type = 278;
                  }
                  if (item.type === "0") {
                    return (
                      <WeaFormItem
                        ecId={`${
                          (this && this.props && this.props.ecId) || ""
                        }_WeaFormItem@onq0zh@showmore`}
                        label={item.shareName}
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                        className={"cowork-content-coverage"}
                      >
                        <Button
                          ecId={`${
                            (this && this.props && this.props.ecId) || ""
                          }_Button@g784sx@showmore`}
                          className="cowork-content-coverage-btn"
                          onClick={onCoverageViewMore}
                        >
                          {getLabel("388933", "查看全部")}
                        </Button>
                      </WeaFormItem>
                    );
                  }
                  return (
                    <WeaFormItem
                      ecId={`${
                        (this && this.props && this.props.ecId) || ""
                      }_WeaFormItem@onq0zh@${item.shareid}`}
                      label={item.shareName}
                      labelCol={{ span: 6 }}
                      wrapperCol={{ span: 18 }}
                      underline
                    >
                      <span className="wea-field-readonly">
                        <span className="ant-col-18">
                          <WeaBrowser
                            ecId={`${
                              (this && this.props && this.props.ecId) || ""
                            }_WeaBrowser@wb0zed@${item.shareid}`}
                            tabs={item.sharelist}
                            replaceDatas={item.sharelist}
                            viewAttr="1"
                            type={type}
                            isSingle={false}
                          />
                        </span>
                        {item.seclevel && (
                          <span className="ant-col-6 seclevel">
                            {item.seclevel}-{item.seclevelMax}
                          </span>
                        )}
                      </span>
                    </WeaFormItem>
                  );
                })}
              </div>
            </div>
          )}

          <div>
            <p className="cowork-content-pub">
              <em
                className="icon-cooperation-personnel"
                style={{ color: "#6AE072" }}
              />
              <span>{getLabel(18605, "参与人员")}</span>
            </p>
            {createUserArray(
              stat.principals,
              `${getLabel(344, "主题")}${getLabel(2097, "负责人")}`,
              principalsShow,
              this.principalsClick,
              "principals",
              principalsArrShow
            )}
            {createUserArray(
              stat.creaters,
              `${getLabel(344, "主题")}${getLabel(382643, "创建人")}`,
              creatersShow,
              this.creatersClick,
              "creaters",
              creatersArrShow
            )}
            {this.onRenderUserArray(
              stat.parterids,
              `${getLabel(17689, "参与者")}(${stat.parteridsCount})`,
              parterShow,
              this.parterClick,
              "parterids",
              parterArrShow,
              stat.parteridsCount
            )}
            {createUserArray(
              stat.typemanagerids,
              `${getLabel(83209, "版块")}${getLabel(2097, "负责人")}(${
                stat.typemanageridsCount
              })`,
              typemanageridsShow,
              this.typemanageridsClick,
              "typemanagerids",
              typemanageridsArrShow
            )}
          </div>

          <div>
            <p className="cowork-content-pub">
              <em
                className="icon-cooperation-personnel"
                style={{ color: "#7C7C7C" }}
              />
              <span>
                {getLabel(382659, "已退出人员")}({stat.quitersCount}){" "}
                <span style={{ color: "red" }}>
                  {getLabel(
                    "516535",
                    "已退出人员请负责人在已退出人员列表重新加入"
                  )}
                </span>
              </span>
            </p>
            {this.onRenderUserArray(
              stat.quiters,
              getLabel(382659, "已退出人员"),
              quitersShow,
              this.quitersClick,
              "quiters",
              quitersArrShow,
              stat.quitersCount
            )}
          </div>

          <div>
            <p className="cowork-content-pub">
              <em
                className="icon-cooperation-Not-checked"
                style={{ color: "#FFBB32" }}
              />
              <span>
                {getLabel(17696, "未查看者")}({stat.noReadidsCount})
              </span>
            </p>
            {this.onRenderUserArray(
              stat.noReadids,
              getLabel(17696, "未查看者"),
              noReadidsShow,
              this.noReadidsClick,
              "noReadids",
              noReadidsArrShow,
              stat.noReadidsCount
            )}
          </div>
        </div>
      </div>
    ) : (
      <div style={{ height: window.innerHeight }}>
        <WeaAlertPage
          ecId={`${
            (this && this.props && this.props.ecId) || ""
          }_WeaAlertPage@ci2m3k`}
          icon="icon-coms-blank"
          paddingTop="40px"
        >
          <div>{getLabel(83553, "暂无数据")}</div>
        </WeaAlertPage>
      </div>
    );
  }

  // 按钮点击效果
  // 版块负责人
  typemanageridsClick = () => {
    this.setState(
      {
        typemanageridsShow: !this.state.typemanageridsShow,
      },
      () => {
        if (this.state.typemanageridsShow) {
          let curEle = document.getElementsByClassName(
            "cowork-detail-typemanagerids"
          )[0];
          this.setState({ typemanageridsArrShow: curEle.offsetHeight < 40 });
        }
      }
    );
  };
  // 主题负责人
  principalsClick = () => {
    this.setState(
      {
        principalsShow: !this.state.principalsShow,
      },
      () => {
        if (this.state.parterShow) {
          let curEle = document.getElementsByClassName(
            "cowork-detail-principals"
          )[0];
          this.setState({ principalsArrShow: curEle.offsetHeight < 40 });
        }
      }
    );
  };
  // 主题创建人
  creatersClick = () => {
    this.setState(
      {
        creatersShow: !this.state.creatersShow,
      },
      () => {
        if (this.state.creatersShow) {
          let curEle = document.getElementsByClassName(
            "cowork-detail-creaters"
          )[0];
          this.setState({ creatersArrShow: curEle.offsetHeight < 40 });
        }
      }
    );
  };
  // 未查看者
  noReadidsClick = () => {
    const { onJoinViewMore } = this.props;
    onJoinViewMore && onJoinViewMore("unread");
  };
  // 参与者
  parterClick = () => {
    const { onJoinViewMore } = this.props;
    onJoinViewMore && onJoinViewMore();
  };
  // 已退出人员
  quitersClick = () => {
    const { onJoinViewMore } = this.props;
    onJoinViewMore && onJoinViewMore("quiter");
  };
}

export default Stat;
